<template>
  <view>
    <uni-search-bar @confirm="confirm" @clear="clear" @input="input" :focus="true"></uni-search-bar>
    <view class="search-history" v-if="searchList.length === 0">
      <view class="search-history-title">
        <text>搜索记录</text>
        <uni-icons type="trash" size="20" @click="deleteSearchHistory"></uni-icons>
      </view>
      <view class="search-tags">
        <uni-tag @click="toGoodsList(v)" class="tag" :text="v" v-for="(v, i) in searchHistory" :key="i"></uni-tag>
      </view>
    </view>
    <view class="search-list" v-else>
      <view @click="toGoodsDetail(v.goods_id)" class="search-list-item" v-for="(v, i) in searchList" :key="i">
        <text>{{ v.goods_name }}</text>
        <uni-icons type="forward" size="20"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.searchHistory = JSON.parse(uni.getStorageSync('searchHistory')) || []
    },
    watch: {
      searchHistory(newValue) {
        uni.setStorageSync('searchHistory', JSON.stringify(newValue))
      }
    },
    methods: {
      confirm(e) {
        const value = e.value;
        this.toGoodsList(value);
        this.addSearchHistory(value)
      },
      // 跳转goods_list 页面
      toGoodsList(value) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + value
        })
      },
      toGoodsDetail(id) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      },
      // 清除搜索记录
      deleteSearchHistory() {
        this.searchHistory = [];
      },
      // 清除事件
      clear() {
        this.searchList = [];
      },
      // 输入事件
      input(value) {
        // 函数防抖处理
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // 去除两段无效空格
          value = value.trim();
          if (value.length === 0) {
            this.searchList = []
            return;
          }
          // 搜索搜索
          this.getSearchList(value)
          // 追加历史记录
          this.addSearchHistory(value)
        }, 500)
      },
      // 添加历史记录函数
      addSearchHistory(value) {
        if (value.length === 0) return;
        // 追加数据
        this.searchHistory.unshift(value)
        // 去重复， 保证数据唯一性
        this.searchHistory = [...new Set(this.searchHistory)]

      },
      // 请求数据函数
      async getSearchList(value) {
        if (value.length === 0) return;
        // 请求搜索接口
        const resp = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: value
        })
        const {
          message,
          meta
        } = resp.data;

        this.searchList = message
      }
    },
    data() {
      return {
        // 防抖定时器
        timer: null,
        // 搜索结果
        searchList: [],
        // 搜索历史记录
        searchHistory: []
      };
    }
  }
</script>

<style lang="scss">
  .search-list {
    .search-list-item {
      display: flex;
      justify-content: space-between;
      padding: 12rpx;
      border-bottom: 2rpx solid #ccc;
      margin: 12rpx 0;

      text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .search-history {
    padding: 12rpx;

    .search-history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 12rpx 0;
      font-weight: bold;
    }

    .search-tags {
      .tag {
        margin-right: 12rpx;
        margin-top: 12rpx;
      }
    }
  }
</style>
